//回复帖子组件
<template>
  <div class="mack-box" v-if="!isHidden" @touchmove.prevent>
    <transition name="fade">
      <div class="black-mack" @click="down_mask" @touchmove.prevent></div>
    </transition>

    <div class="fill-in">
      <div class="add-img" v-show="imgList.length">
        <p class="font14">
          图片(最多6张，还可上传
          <span v-text="6-imgList.length"></span>张)
        </p>
        <ul class="img-list">
          <li v-for="(url,index) in imgList" :key="index">
            <p class="iconfont icon-chahao" @click.stop="delImg(index)"></p>
            <img class="srcimg" :src="fmtImg(url)">
          </li>
        </ul>
      </div>
      <van-cell-group class="van-hairline--surround">
        <van-field
          @blur="out"
          @focus="focusfns"
          v-model="replyinfo.comment_content"
          type="textarea"
          placeholder="说点什么呢..."
          rows="3"
          ref="focus"
          autosize
        />
      </van-cell-group>
      <div class="fill-reply">
        <van-row type="flex" justify="space-between" align="center">
          <van-col>
            <input @blur="out" @change="fileChange($event)" type="file"
              name="file_path" id="upload_file" style="display: none" multiple accept="image/*">
            <div @click="chooseType" style="font-size:26px;" class="iconfont icon-tupian1"></div>
          </van-col>
          <van-col>
            <!-- <span v-if="!replyinfo.comment_content.length">回复</span> -->
            <span style="color:#FF894B" @click="replyClick">回复</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-loading v-show="loading"/>
  </div>
</template>

<script>
import { activity_save, saveMsgMedal } from "@/api/activity";
import { byteUpload, reception_fileUpload } from "@/api/login";
import { getToken } from '@/utils/auth'
import axios from "axios";
import other from "@/utils/other";
 import { Debounce, Throttle } from "@/utils";

export default {
  props: ["replyinfo"],
  data() {
    return {
      isHide: false,
      isShow: false,
      isHidden: false,
      showFace: false,
      imgList: [],
      listQuery: {
        fileName: "",
        img64Byte: ""
      },
      img64Byte: "", //图片base64;
      fileName: "", //图片名称
      size: 0,
      limit: 6, //限制图片上传的数量
      tempImgs: [],
      loading: false,
      activId: ""
    };
  },
  methods: {
    focusfns() {
      other.interval();
    },
    out() {
      clearInterval(other.interval());
      other.inputBlur();
    },
    fmtImg(url) {
      let index = url .lastIndexOf("\/");
      url  = url .substring(index + 1, url .length);
      return localStorage.getItem("oss_public_url") + "/" + url;
    },
    chooseType() {
      document.getElementById("upload_file").click();
    },
    async fileChange(el) {
      if (!el.target.files[0].size) return;
      await this.fileList(el.target);
      el.target.value = "";
    },
    async fileList(fileList) {
      let files = fileList.files;
      this.loading = true;
      for (let i = 0; i < files.length; i++) {
        //判断是否为文件夹
        if (files[i].type != "") {
          await this.uploadImg(files[i]);
        }
      }
      this.loading = false;
    },
    async uploadImg(file) {
      console.log(file);
      if (this.limit !== undefined) this.limit--;
      if (this.limit !== undefined && this.limit < 0) return;
      //判断是否为图片文件
      if (file.type.indexOf("image") == -1) {
        this.$toast.success("请选择图片文件");
        return;
      }
      let config = {
        headers: {'Content-Type': 'application/x-www-form-urlencoded','Authorization':getToken() || localStorage.getItem('token')},
      }
      let param = new FormData(); //创建form对象
      param.append("file_path", file); //通过append向form对象添加数据
      this.loading = true
      this.$http.post('/login/reception/uploadImg2Oss', param, config).then(res => {
      // this.$http.post('/login/reception/fileUpload', param, config).then(res => {
        if (res.body.status == 100) {
          this.imgList.push(res.body.data.file_path);
        }
       this.loading = false
      })

      // return;
      // try {
      //   let { data } = await reception_fileUpload(param);
      //   if (data.status === 100) {
      //     this.imgList.push(data.data.file_path);
      //   }
      // } catch (error) {
      //   this.loading = false;
      // }
    },
    delImg(index) {
      this.imgList.splice(index, 1);
      if (this.limit !== undefined) this.limit = 6 - this.imgList.length;
    },
    down_mask() {
      this.$emit("isconceal");
    },
    //回复贴子和回复评论
    replyClick:Throttle(function () {
      this.saveObj();
    },1000),
    async saveObj() {
      this.replyinfo.time = new Date();
      this.replyinfo.comment_content = this.replyinfo.comment_content;
      if (!this.replyinfo.comment_content) {
        this.$toast("请输入评论内容");
        return;
      }

      let pictures = this.imgList.join();
      let query = Object.assign({}, this.replyinfo, { pictures: pictures });
      let res = await activity_save(query);
      let result = res.data;
      if (result.status == 100) {
        this.activId = result.data;
        this.saveMsg();
        this.isHidden = true;
        this.$toast.success("评论成功");
        this.replyinfo.comment_content = ''
        this.$emit("initList");
        this.$emit("isconceal");
      }
    },
    async saveMsg() {
      let { data } = await saveMsgMedal(this.activId);
    }
  },
  created() {

  }
};
</script>

<style lang="scss" scoped>
@import "Container";
</style>
